"use client"

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { Shield } from 'lucide-react';

export function Navbar() {
  const pathname = usePathname();
  
  // 如果是登录页面，则不显示导航栏
  if (pathname === '/login') {
    return null;
  }
  
  const navItems = [
    { name: '系统概览', href: '/' },
    { name: '作业票查询', href: '/query' },
    { name: '电气接线图', href: '/diagram' },
    { name: '系统管理', href: '/admin' },
  ];
  
  return (
    <nav className="bg-navbar text-white py-4 px-6 shadow-md">
      <div className="container mx-auto flex flex-wrap items-center justify-between">
        <div className="flex items-center space-x-2">
          <Shield className="h-6 w-6 text-primary-foreground" />
          <span className="text-xl font-bold">安全联锁系统</span>
        </div>
        
        <div className="hidden md:flex space-x-8">
          {navItems.map((item) => {
            const isActive = pathname === item.href || 
                            (item.href !== '/' && pathname.startsWith(item.href));
            
            return (
              <Link 
                key={item.href} 
                href={item.href}
                className={cn(
                  "transition-colors hover:text-white/90",
                  isActive 
                    ? "text-white font-medium border-b-2 border-primary" 
                    : "text-white/70"
                )}
              >
                {item.name}
              </Link>
            );
          })}
        </div>
        
        <div className="flex items-center space-x-4">
          <span className="text-primary-foreground font-medium">超级管理员</span>
          <div className="h-4 w-px bg-white/20"></div>
          <Link href="/login" className="text-white/70 hover:text-white">
            注销
          </Link>
        </div>
      </div>
    </nav>
  );
}

export default Navbar; 